<template>
    <div class="navMenu">
        <div v-if="initFlg">加載中... </div>
        <el-menu-item route="/homeIndex" index="homeIndex">
            <i class="el-icon-menu" :style="{fontSize:iconSize}"></i>
            <span slot="title">首页</span>
        </el-menu-item>
        <label v-for="navMenu in menuData">
            <el-menu-item
                    v-if="navMenu.childs==null&&navMenu.entity"
                    :key="navMenu.entity.id" :data="navMenu.entity.page" :index="navMenu.entity.code"
                    :route="navMenu.entity.page">
                <i :class="navMenu.entity.icon" :style="{fontSize:iconSize}"></i>
                <span slot="title">{{navMenu.entity.name}}</span>
            </el-menu-item>
            <el-submenu
                    v-if="navMenu.childs&&navMenu.entity"
                    :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.code">
                <template slot="title">
                    <i :class="navMenu.entity.icon" :style="{fontSize:iconSize}"></i>
                    <span> {{navMenu.entity.name}}</span>
                </template>
                <NavMenuChild :menuData="navMenu.childs" :showEnableOnly="showEnableOnly" :iconSize="iconSize" ></NavMenuChild>
            </el-submenu>
        </label>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'NavMenu',
        props: ['showEnableOnly', 'textColor', 'iconColor', 'iconSize'],
        data() {
            return {
                menuData : "",
                initFlg:true
            }
        },
        mounted(){
            // this.loadMenus();
        },
        methods: {
            loadMenus:function () {
                this.$axios.get(this.$serverUrl + '/getUserPerms').then((res) => {
                    var menusObj = JSON.parse(JSON.stringify(res.data));
                    // 加载菜单信息
                    this.menuData = menusObj;
                    // 关闭默认
                    this.initFlg = false;
                    // 加载动态路由
                    let routes = this.mergeRoutes(res.data);
                    // 防止重复配置相同路由
                    if (this.$router.options.routes.length <= 1) {
                        this.$router.addRoutes(routes);
                        // this.$router不是响应式的，所以手动将路由元注入路由对象
                        this.$router.options.routes = routes;
                    }
                    // 定位到首页
                    this.$router.push({path:this.$homePath});
                    console.log(this.$router.options.routes);
                }).catch((res) => {
                    console.log(res)
                })
            },
            /**
             * 合并远程路由到本地路由
             * @param: subList [Array] 远程路由列表
             * @param: routes [Array] 本地路由列表
             * */
            mergeRoutes:function (subs) {
                let routes = [];
                var index = 0;
                if (subs) {
                    for (let i = 0; i < subs.length; i++) {
                        if(subs[i].entity.page !== "/"){
                            let temp = {
                                path: subs[i].entity.page,
                                name: subs[i].entity.code,
                                component: resolve => require([`@/${Obj[i].entity.component}`],resolve)
                            };
                            routes.push(temp);
                        }
                        if (subs[i].childs) {
                            routes = this.addRoutes(routes, index, subs[i].childs);
                        }
                    }
                }
                return routes;
            },
            addRoutes: function (routes, index, Obj) {
                if (Obj) {
                    for (let i = 0; i < Obj.length; i++) {
                        if (Obj[i].entity.page !== "/") {
                            let temp = {
                                path: Obj[i].entity.page,
                                name: Obj[i].entity.code,
                                component: resolve => require([`@/${Obj[i].entity.component}`],resolve)
                            };
                            routes.push(temp);
                        }
                        if (Obj[i].childs) {
                            this.addRoutes(routes, index, Obj[i].childs);
                        }
                    }
                }
                return routes;
            }
        },
        components: {NavMenuChild: resolve => require([`@/components/common/NavMenuChild`], resolve)}
    }
</script>

<style scoped>
</style>